<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="768" height="512"></canvas>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <canvas id="box" width="800" height="800"></canvas>
    <canvas id="bwox" width="800" height="800"></canvas>
    <canvas id="btox" width="600" height="400"></canvas>
</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(200, 200, 40, 0, 2 * Math.PI);
    ctx.stroke();


    var canvas=document.getElementById('bwox');
        var pi=canvas.getContext('2d');
        pi.fillStyle="#000";
        pi.moveTo(400,500);
        pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
        pi.closePath();
        pi.fill();


  var canvas = document.getElementById('box');
  //获取上下文对象
  var context = canvas.getContext('2d');
  //圆开始路径
  context.beginPath();
  //绘制最外层的大圆(黑色)
  context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360);
  //将大圆填充为黑色
  context.fillStyle = '#000';
  context.fill();
  //绘制左半圆(白色)
  context.beginPath();
  context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制左上半圆(黑色)
  context.beginPath();
  context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#000';
  context.fill(); 
  //绘制右下半圆(白色)
  context.beginPath();
  context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制左上小半圆(白色)
  context.beginPath();
  context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制右下小半圆(黑色)
  context.beginPath();
  context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#000';
  context.fill(); 
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    for (var i = 0; i < 5; i++) {
      //大圆
      context.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) * 200 +300,
      -Math.sin((18 + i * 72)/180 * Math.PI) * 200 +300)
      //小圆
      context.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 80 +300,
      -Math.sin((54 + i * 72)/180 * Math.PI) * 80 +300)
    }
    context.closePath();
    context.lineWidth = 10;
    context.stroke();



    var canvas = document.getElementById("btox");
        var context = canvas.getContext('2d');
        var width = canvas.width; 
        var height = width * 2 / 3; 
        var w = width / 30; 
        context.fillStyle = "red";
        context.fillRect(0, 0, width, height);
        var maxR = 0.15,
            minR = 0.05; //五角星的半径
        var maxX = 0.25,
            maxY = 0.25; //大五星的位置   
        // 小五角星的位置
        var minX = [0.50, 0.60, 0.60, 0.50];
        var minY = [0.10, 0.20, 0.35, 0.45]; 
        var ox = height * maxX,
            oy = height * maxY;
        create5star(context, ox, oy, height * maxR, "#ff0", 0);    
        for (var idx = 0; idx < 4; idx++) {
            var sx = minX[idx] * height,
                sy = minY[idx] * height;
            var theta = Math.atan((oy - sy) / (ox - sx));
           create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);
        }
        function create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy); //移动坐标原点   
            context.rotate(Math.PI + rotato); //星的旋转   
            context.beginPath();    
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) { //五条边   
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }
</script>
</html>